<template>
  <div class="planReport">
    <div></div>

    <el-card shadow="never" class="reportinfo">
      <h2>测试报告</h2>
      <p>计划名称: {{ record.planName }}</p>
      <p>执行时间: {{ record.create_time }}</p>
      <p>总耗时长: {{ record.totalTime }} ms</p>
      <p>用例总数: {{ record.caseCount }} 条</p>
      <p>执行通过: {{ record.passCount }} 条</p>
      <p>执行失败: {{ record.failCount }} 条</p>
      <p>通 过 率: {{ passRatio }}</p><br />
      <div class="oprBut">
        <el-button type="danger" @click="faildCase">失败</el-button>
        <el-button type="success" @click="passCase">通过</el-button>
        <el-button @click="allCase">所有</el-button>
      </div>
      
    </el-card>

    <el-card shadow="never" class="caselist">
      <h3>用例报告列表</h3>
      <el-table :data="reportlsit" style="width: 100%" stripe border>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="id" label="报告ID" width="80"></el-table-column>
        <el-table-column
          prop="casename"
          label="用例名称"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="elapsedt"
          label="接口响应时间(ms)"
          width="140"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop label="测试时间" width="193">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              myDate(scope.row.create_time)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_user"
          label="执行者"
          width="80"
        ></el-table-column>
        <el-table-column prop label="测试结果" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.status == 1 ? "通过" : "失败"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报告详情">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="top-start"
            >
              <el-button
                type="success"
                icon="el-icon-document"
                circle
                size="mini"
                @click="clickView(scope.row.id)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        >
        </el-pagination>
      </div>
    </el-card>
    <CaseReport ref="caseRep" />
  </div>
</template>

<script>
import { getRepcaselist, getRecordinfo } from "@/network/networks";
import { myDate } from "@/assets/js/common";
import CaseReport from "@/views/manage/common/CaseReport";
export default {
  components: {
    CaseReport,
  },
  data() {
    return {
      reportlsit: [],
      record: {},
      passRatio: 0.0, //通过率

      excutnum:"",   //执行批次
      status: -1,

      //page分页
      currentPage: 1, //当前页
      totalCount: 0, //总数量
      pageSize: 50, //数量/页
    };
  },

  mounted() {
    this.getreportlist();
    this.getrecord();
  },

  methods: {
    getrecord() {
      getRecordinfo({
        excutnum: this.$route.query.excutnum,
      })
        .then((res) => {
          if (res.code == 1) {
            this.record = res.data;
            this.record.create_time = this.myDate(this.record.create_time);
            this.passRatio =
              Math.round(
                (this.record.passCount / this.record.caseCount) * 10000
              ) /
                100.0 +
              "%";
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$messageerror(err);
        });
    },

    getreportlist() {
      getRepcaselist({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        excutnum: this.$route.query.excutnum,
        status: this.status,
      })
        .then((res) => {
          if (res.code == 1) {
            this.reportlsit = res.data.reports;
            this.totalCount = res.data.totalCount;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    //打开用例执行详情页面
    clickView(id) {
      this.$refs.caseRep.showDialog = true;
      this.$refs.caseRep.rowid = id;
    },

    //设置每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getreportlist();
    },

    //切换页数据
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getreportlist();
    },

    faildCase(){
      this.status = 0
      this.currentPage = 1
      this.getreportlist()
    },

    passCase(){
      this.status = 1
      this.currentPage = 1
      this.getreportlist()
    },
    
    allCase(){
      this.status = -1
      this.currentPage = 1
      this.getreportlist()
    },


    myDate(time) {
      return myDate(time);
    },
  },
};
</script>

<style lang="less" scoped>
.caselist {
  margin-top: 15px;
}
</style>